<template>
	<view style="position: relative;">
		<view class="" style="position: fixed;z-index: 1000;top: 0;">
			<view class="" style="background-color: #fff;">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<uni-nav-bar @clickLeft="back" @clickRight="tuiguang" left-icon="back" border="false" title="发布任务"></uni-nav-bar>
			</view>
		</view>
		<view class="" style="padding-top:150rpx;">
			<view class="content">
				<!-- <view class="">
					<selfCode lable="任务标题" inputValue="" :qianjin="false" type="input" placeholder="请输入标题" dongLabelpaddingRight="36rpx" dongLabelFontColor="#191919"></selfCode>
				</view>
				<view class="">
					<selfCode lable="商品所属平台" type="picker" :dongLabel="attestationBankname" dictType="" :array="array"  dongLabelpaddingTop="12rpx" dongLabelpaddingRight="22rpx" dongLabelFontColor=""></selfCode>
				</view>
				<view class="">
					<selfCode lable="店铺ID" inputValue="21312321" borderBottom="unset" :qianjin="false" type="input" dongLabelFontColor="#191919" placeholder="请输入标题" dongLabelpaddingRight="36rpx"></selfCode>
				</view> -->
				<u-cell-group :border = "false"> 
					<u-cell-item :title-style="titleStyle" title="任务标题"  :center="true" :arrow="false">
						<u-input v-model="title" type="text" :border="false" height="40rpx" input-align="right" placeholder="请输入标题" :clearable="false"/>
					</u-cell-item>
					<u-cell-item :title-style="titleStyle" title="商品所属平台" :center="true" :arrow="true" @click="click" :value="pingtaiStr">
						
					</u-cell-item>
					<u-cell-item :title-style="titleStyle" title="店铺ID"  :center="true" :arrow="false" :border-bottom="false" :value="shopid"></u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="content">
				
				<u-cell-group :border = "false">
					<u-cell-item :title-style="titleStyle" title="商品价格"  :center="true" :arrow="false">
						<u-input v-model="pirce" type="text" :border="false" height="40rpx" input-align="right" placeholder="请输入商品价格" :clearable="false" @change="changDanjin"/>
					</u-cell-item>
					<u-cell-item :title-style="titleStyle" title="所需单数"  :center="true" :arrow="false">
						<u-input v-model="danshu" type="text" :border="false" height="40rpx" input-align="right" placeholder="请输入单数" :clearable="false" @change="changDanjin"/>
					</u-cell-item>
					<u-cell-item :title-style="titleStyle" title="任务佣金"  :center="true" :arrow="false" :value="danweiYongjin"></u-cell-item>
					<u-cell-item :title-style="titleStyle" title="截止日期"  :center="true" :arrow="false" :border-bottom="false"  @click="time_show=true" :value="jiezhi_time">
						
					</u-cell-item>
				</u-cell-group>
				
			</view>
			
			<view class="content">
				<u-cell-group :border = "false">
					<u-cell-item :title-style="titleStyle" title="是否有礼品" :center="true" :arrow="false" :border-bottom="false">
						<u-switch v-model="checked" active-value="1" inactive-value="2" @change="change"></u-switch>
					</u-cell-item>
				</u-cell-group>
				<!-- <view class="">
					<selfCode lable="是否有礼品" type="picker" borderBottom="unset" :dongLabel="attestationBankname" dictType="" :array="array"  dongLabelpaddingTop="12rpx" dongLabelpaddingRight="22rpx" dongLabelFontColor=""></selfCode>
				</view> -->
			</view>
			
			<view class="content" style="padding: 30rpx 30rpx;">
				<view class="text" style="padding-bottom: 20rpx;">备注</view>
				<u-input type="textarea" :custom-style="customStyle" height="280" placeholder="请输入备注" v-model="beizhu" :clearable="false"/>
			</view>
			<view class="content1">
				<view class="">
					<view class="uni-flex one-label" >
						<view class="title-text labelcolor">任务本金</view>
						<view class="label-data" style="color: #FF4D4D;">{{benjin}}</view>
					</view>
					<view class="uni-flex one-label" >
						<view class="title-text labelcolor">任务佣金</view>
						<view class="label-data" >{{yongjin}}</view>
					</view>
					<view class="uni-flex one-label" >
						<view class="title-text labelcolor">推荐人分成</view>
						<view class="label-data" >{{tuijianren}}</view>
					</view>
					<view class="uni-flex one-label" style="padding-bottom: 10rpx;">
						<view class="title-text labelcolor">团队管理费</view>
						<view class="label-data">{{guanlifei}}</view>
					</view>
				</view>
			</view>
			<view class="" style="padding:0 54rpx 80rpx;">
				<submitButtom text="提交并支付" :buttonMethod="submit"></submitButtom>
			</view>
			<bottomSheet :isShowBottom="isshow" @closeBottom="guanbi()"></bottomSheet>
			<u-select v-model="show" mode="single-column" label-name="dictLabel" value-name="dictValue"  :list="pingtaiList" @confirm="confirm"></u-select>
			<u-picker v-model="time_show" mode="time" @confirm="confirmTime" :start-year="startYear"></u-picker>
			<u-toast :type="toastType" ref="uToast"></u-toast>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import selfCode from "@/components/self-card/self-card.vue"
	import submitButtom from "@/components/submit-button/submit-button.vue"
	import bottomSheet from "@/components/bbh-sheet/bottomSheet.vue"
	export default {
		components:{
			uniNavBar,
			selfCode,
			submitButtom,
			bottomSheet
		},		
		data() {
			return {
				show: false,
				pingtaiList:[
					
				],
				customStyle:{
					"background-color":"#F7F8F9",
					padding:"20rpx"
				},
				checked: false,
				"attestationBankname":"请选择",
				isshow:false,
				titleStyle:{'color': '#191919'},
				title:"",
				pingtai:"",
				pingtaiStr:"请选择",
				shopid:"",
				danweiYongjin:"",
				jiezhi_time:"请选择任务截止日期",
				time_show:false,
				lipin:2,
				beizhu:"",
				// benjin:"0.00",
				yongjin:"0.00",
				guanlifei:"0.00",
				tuijianren:"0.00",
				danshu:"",
				pirce:"",
				taskId:"",
				uid:uni.getStorageSync("token"),
				toastType:"",
				startYear:new Date().getFullYear()
			}
		},
		onLoad() {
			var that = this;
			this.$util.nuiAjax(this.$jiekou.getDictTypeList,{dictType:"shop_leixing"},function(res){
				if(res.result == "true"){
					that.pingtaiList = [];
					// that.pingtaiList = res.data;
					var userinfo = uni.getStorageSync("userInfo");
					for(var i = 0 ;i<res.data.length;i++){
						var piingtai = res.data[i];
						
						if(piingtai.dictValue == 1 && userinfo.taobaodianId !=null && userinfo.taobaodianId != "" ){
							that.pingtaiList.push(piingtai);
						}
						if(piingtai.dictValue == 2 && userinfo.jingdongdianId !=null && userinfo.jingdongdianId != "" ){
							that.pingtaiList.push(piingtai);
						}
						if(piingtai.dictValue == 3 && userinfo.pinduoduoId !=null && userinfo.pinduoduoId != "" ){
							that.pingtaiList.push(piingtai);
						}
						if(piingtai.dictValue == 4 && userinfo.alibabadianId !=null && userinfo.alibabadianId != "" ){
							that.pingtaiList.push(piingtai);
						}
					}
				}
			});
		},
		computed:{
			benjin:{
				get:function(){
					return this.danshu*this.pirce;
				  },
				  set:function(v){
					
				  }
			}
		},
		watch:{
			
			"pirce":function(newVal){
				this.changDanjin();
			},
			"danshu":function(newVal){
				this.changDanjin();
			},
			"pingtai":function(newVal){
				this.changDanjin();
			}
		},
		methods: {
			tuiguang:function(){
				this.$util.toUrl("./shangjiaGuize");
			},
			back:function(){
				uni.navigateBack();
			},
			submit:function(){ //提交任务
				
				// this.isshow=true;
				let that = this;
				var data = this.$data;
				if(data.title==""){
					that.$refs.uToast.show({
						title: "请输入任务标题"
					});
					return;
				}
				
				if(data.pirce==""){
					that.$refs.uToast.show({
						title: "请输入商品单价"
					});
					return;
				}
				
				if(data.pirce==""){
					that.$refs.uToast.show({
						title: "请输入所需单数"
					});
					return;
				}
				
				if(data.jiezhi_time==""){
					that.$refs.uToast.show({
						title: "请输入任务截止时间"
					});
					return;
				}
				data.benjin = this.benjin;
				
				this.$util.nuiAjax(this.$jiekou.fabuRenwu,data,function(res){
					if(res.result == "true"){
						if(res.isZhifu==1){
							that.$refs.uToast.show({
								title: "余额不足，请充值",
								//todo 跳转充值页面
							});
						}else{
							uni.$emit("faburenwu");
							// that.toastType="success";
							that.$refs.uToast.show({
								title: "发布成功",
								type:"success"
							});
							uni.navigateBack();
						}
					}else{
						that.$refs.uToast.show({
							title: res.message
						});
					}
				});
				
				
			},
			changDanjin(){
				var that = this;
				if(this.pirce!="" && this.danshu!="" && this.pingtai!=""){
					this.$util.nuiAjax(this.$jiekou.jisuanYongjin,{uid:this.uid,pingtai:this.pingtai,pirce:this.pirce,danshu:this.danshu},function(res){
						if(res.result == "true"){
							that.yongjin = res.zongyongjin;
							that.guanlifei = res.gaunlifei;
							that.tuijianren = res.tuijianren;
							that.taskId = res.taskId;
						}
					});
				}
				if(this.pirce!="" && this.pingtai!=""){
					console.log(1);
					this.$util.nuiAjax(this.$jiekou.jisuanDanweiZuiGaoYongjin,{uid:this.uid,pingtai:this.pingtai,pirce:this.pirce},function(res){
						if(res.result == "true"){
							that.danweiYongjin = res.priceYongjin;
						}
					});
				}
			},
			guanbi:function(){
				this.isshow = false;
			},
			click(index){
				if(this.pingtaiList.length==0){
					this.$refs.uToast.show({
						title: "请先完善店铺信息"
					});
					return;
				}
				this.show = true;
			},
			change(value){
				this.lipin = value;
			},
			confirm(e) {
				var userinfo = uni.getStorageSync("userInfo");
				this.pingtai = e[0].value;
				this.pingtaiStr = e[0].label;
				if(this.pingtai==1){
					this.shopid = userinfo.taobaodianId;
				}else if(this.pingtai==2){
					this.shopid = userinfo.jingdongdianId;
				}else if(this.pingtai==3){
					this.shopid = userinfo.pinduoduoId;
				}else if(this.pingtai==4){
					this.shopid = userinfo.alibabadianId;
				}
			},
			confirmTime(e){
				this.jiezhi_time = e.year+"-"+e.month+"-"+e.day;
			}
		}
	}
</script>

<style lang="scss">
	.status-css{
		// height:40rpx;
		font-size:28rpx;
		font-weight:500;
		color:rgba(255,77,77,1);
		line-height:40rpx;
		padding-top: 30rpx;
		text-align: right;
	}
	page{
		background-color: $page-bg-color;
	}
	.content{
		box-shadow:0px 8px 16px 0px rgba(246,247,248,1);
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}
	
	.one-label{
		padding-top: 20rpx;
		justify-content: space-between;
		
	}
	.labelcolor{
		color: #191919;
		text-align: right;
	}
	.title-text{
		// width:112rpx;
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		line-height:40rpx;
	}
	.text{
		// height:40rpx;
		font-size:28rpx;
		font-weight:400;
		line-height:40rpx;
		flex: 1;
		padding-bottom: 32rpx;
	}
	.textareac{
		height:200rpx;background-color: #F7F8F9;padding: 30rpx;border-radius:8rpx;
		font-size:28rpx;
		font-weight:400;
		line-height:28rpx;
	}
	.content1{
		padding: 0 30rpx 0 30rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}
	.status_bar {
	    height: var(--status-bar-height);
	    width: 100%;
	}
</style>
